<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>复选框</title>
		<!--框架必需start-->
		<script type="text/javascript" src="../../libs/js/jquery.js"></script>
		<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
		<script type="text/javascript" src="../../libs/js/framework.js"></script>
		<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" id="skin" prePath="../../" />
		<link rel="stylesheet" type="text/css" id="customSkin" />
		<!--框架必需end-->

	</head>

	<body>
		<div class="page_content">	
			<div class="groupTitle"><span>组件说明</span></div>
			<div>
				自定义样式只在支持CSS3的浏览器中生效，例如IE9以上、firefox、chrome，低版本浏览器会显示原生的radio样式。
			</div>

			<div class="groupTitle"><span>1、基本使用（label要放在右侧）</span></div>

			爱好：<input type="checkbox" id="sing-1" name="hobby-1" value="唱歌" /><label for="sing-1" class="hand">唱歌</label>
			<input type="checkbox" id="dance-1" name="hobby-1" value="跳舞" /><label for="dance-1" class="hand">跳舞</label>


			<div class="height_15"></div>

			<div class="groupTitle"><span>2、设置初始值</span></div>

			爱好：<input type="checkbox" id="sing-2" name="hobby-2" value="唱歌" checked="checked" /><label for="sing-2" class="hand">唱歌</label>
			<input type="checkbox" id="dance-2" name="hobby-2" value="跳舞" checked="checked" /><label for="dance-2" class="hand">跳舞</label>
			<input type="checkbox" id="football-2" name="hobby-2" value="足球" /><label for="football-2" class="hand">足球</label>

			<div class="height_15"></div>

			<div class="groupTitle"><span>3、动态选中某项</span></div>

			爱好：<input type="checkbox" id="sing-3" name="hobby-3" value="唱歌" /><label for="sing-3" class="hand">唱歌</label>
			<input type="checkbox" id="dance-3" name="hobby-3" value="跳舞" /><label for="dance-3" class="hand">跳舞</label>
			<input type="checkbox" id="pingpang-3" name="hobby-3" value="乒乓球" checked="checked" /><label for="pingpang-3" class="hand">乒乓球</label>
			<input type="button" value="我喜欢唱歌跳舞，不喜欢乒乓球" onclick="selectItem()" />
			<input type="button" value="我都喜欢" onclick="selectAllItem()" />
			<input type="button" value="我都不喜欢" onclick="clearAllItem()" />

			<div class="height_15"></div>

			<div class="groupTitle"><span>4、禁用</span></div>

			爱好：<input type="checkbox" id="sing-4" name="hobby-4" value="唱歌" disabled="disabled" /><label for="sing-4" class="hand">唱歌</label>
			<input type="checkbox" id="dance-4" name="hobby-4" value="跳舞" disabled="disabled" /><label for="dance-4" class="hand">跳舞</label>
			<input type="checkbox" id="pingpang-4" name="hobby-4" value="乒乓球" checked="checked" disabled="disabled" /><label for="pingpang-4" class="hand">乒乓球</label>
			<br/>
			<input type="button" value="启用" onclick="enableSelect()" />
			<input type="button" value="禁用" onclick="disableSelect()" />

			<div class="height_15"></div>

			<div class="groupTitle"><span>5、动态生成</span></div>

			<input type="button" value="动态生成多选按钮" id="testBtn" />

			<div class="height_15"></div>

			<div class="groupTitle"><span>6、获取选中项</span></div>

			爱好：<input type="checkbox" id="sing-6" name="hobby-6" value="唱歌" /><label for="sing-6" class="hand">唱歌</label>
			<input type="checkbox" id="dance-6" name="hobby-6" value="跳舞" /><label for="dance-6" class="hand">跳舞</label>
			<input type="checkbox" id="pingpang-6" name="hobby-6" value="乒乓球" checked="checked" /><label for="pingpang-6" class="hand">乒乓球</label>
			<input type="button" value="我的爱好是？" onclick="getCheckValue()" />

			<div class="height_15"></div>

	</div>
		

		<script type="text/javascript">
			//选中唱歌 跳舞
			function selectItem() {
				$("input:checkbox[name=hobby-3]").eq(0).prop("checked", true);
				$("input:checkbox[name=hobby-3]").eq(1).prop("checked", true);
				$("input:checkbox[name=hobby-3]").eq(2).prop("checked", false);
			}

			//选中全部
			function selectAllItem() {
				$("input:checkbox[name=hobby-3]").prop("checked", true);
			}

			//清空全部选项
			function clearAllItem() {
				$("input:checkbox[name=hobby-3]").prop("checked", false);
			}

			//设为不可用
			function disableSelect() {
				$("#sing-4").attr("disabled", true);
				$("#dance-4").attr("disabled", true);
				$("#pingpang-4").attr("disabled", true);
			}
			//设为可用
			function enableSelect() {
				$("#sing-4").attr("disabled", false);
				$("#dance-4").attr("disabled", false);
				$("#pingpang-4").attr("disabled", false);
			}

			//生成选项
			var counter = 0
			$(function() {
				$("#testBtn").click(function() {
					var checkStr = "<input type='checkbox' id='love-" + counter + "' name='hobby' value=" + counter + "/><label class='hand' for='love-" + counter + "'>爱好" + counter + "</label>";
					var $input = $(checkStr);
					$(this).after($input);
					counter++;
				})
			})

			//获取复选框的值
			function getCheckValue() {
				var arr=new Array();
				$('input:checkbox[name=hobby-6]:checked').each(function(){
				    arr.push($(this).val());
				});
				var msg=arr.join(',');
				top.Toast('showNoticeToast', msg);
			}
		</script>

	</body>

</html>